<template>
  <div class="ft-info-page">
    <!-- 顶部 -->
    <div class="page-header">
      <a-button type="link" class="back" @click="goBack">
        <LeftOutlined class="back-icon" /> 返回
      </a-button>
      <span class="sep">|</span>
      <span class="title">详情</span>
    </div>

    <!-- 新父级 -->
    <div class="content-area">
      <!-- 内容区 -->
      <div class="form-like">
        <div class="row">
          <div class="label">名称：</div>
          <div class="value">
            <div class="text">{{ detail.name }}</div>
          </div>
        </div>
        <div class="row">
          <div class="label">状态：</div>
          <div class="value">
            <a-radio-group :value="detail.status === 'enabled'" disabled>
              <a-radio :value="true">启用</a-radio>
              <a-radio :value="false">停用</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>

      <!-- 底部操作 -->
      <div class="page-footer">
        <div class="footer-inner">
          <a-button type="link" class="foot-btn primary" @click="onEdit"
            >编辑</a-button
          >
          <span class="vsep">|</span>
          <a-button type="link" class="foot-btn ghost" @click="goBack"
            >返回</a-button
          >
        </div>
      </div>

      <div class="bottom-gap" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { LeftOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { getForbiddenById } from "@/api/modules/forbiddenTerms.api";

const route = useRoute();
const router = useRouter();
const TAB_KEY = "forbidden";

type Detail = {
  id?: string | number;
  name: string;
  status: "enabled" | "disabled";
};
const detail = ref<Detail>({ id: undefined, name: "", status: "enabled" });

function mapToDetail(d: any): Detail {
  return {
    id: d?.id,
    name: String(d?.query ?? ""),
    status: d?.status === "published" ? "enabled" : "disabled",
  };
}

async function initDetail() {
  const raw = Array.isArray(route.query.row)
    ? route.query.row[0]
    : (route.query.row as string | undefined);
  const idFromQuery = route.query.id as string | number | undefined;

  if (raw) {
    try {
      const o: any = JSON.parse(decodeURIComponent(raw));
      detail.value = {
        id: o?.id ?? idFromQuery,
        name: String(o?.name ?? ""),
        status: o?.status ?? "enabled",
      };
      return;
    } catch {
      /* ignore */
    }
  }

  if (idFromQuery != null) {
    try {
      const res: any = await getForbiddenById(idFromQuery);
      const data = res?.data ?? res;
      detail.value = mapToDetail(data);
    } catch (e: any) {
      message.error(e?.message || "获取详情失败");
    }
  }
}

onMounted(initDetail);

function goBack() {
  router.push({ path: "/", query: { tab: TAB_KEY } });
}

function onEdit() {
  router.push({
    path: "/ForbiddenTermsTabPage",
    query: {
      tab: TAB_KEY,
      mode: "edit",
      id: String(detail.value.id ?? ""),
      backTo: "tab",
      row: encodeURIComponent(JSON.stringify(detail.value)),
    },
  });
}
</script>

<style lang="less" scoped>
@pad-x: 24px;
@wrap-max: 720px; 
@label-w: 88px; 
@safe-bottom: env(safe-area-inset-bottom);


.ft-info-page {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  font-family: "PingFang SC";

  /* 顶部 */
  .page-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px @pad-x;
    border-bottom: 1px solid #f0f0f0;
    flex: 0 0 auto;

    .back.ant-btn {
      display: inline-flex;
      align-items: center;
      padding-left: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      color: #81889c;

      .back-icon {
        font-size: 16px;
        color: inherit;
      }
    }
    .sep {
      height: 24px;
      line-height: 24px;
      color: #d9d9d9;
      user-select: none;
    }
    .title {
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-weight: 500;
    }
  }

  /* 新父级滚动容器 */
  .content-area {
    flex: 1 1 auto;
    min-height: 0; 
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + @safe-bottom);

    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.25);
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    scrollbar-gutter: stable;
  }

  /* 内容区 */
  .form-like {
    padding: 24px @pad-x 0 140px;

    .row {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      width: 100%;
      max-width: (@wrap-max + @label-w); 
      gap: 12px;
    }
    .label {
      width: @label-w;
      flex: 0 0 @label-w;
      color: #333;
      line-height: 24px;
      font-size: 14px;
    }
    .value {
      flex: 1 1 auto;
      font-size: 14px;
      line-height: 24px;
      .text {
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }

  /* 底部操作 */
  .page-footer {
    position: static;
    margin-top: 16px;
    padding: 12px @pad-x calc(12px + @safe-bottom) @pad-x;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);

    .footer-inner {
      width: 100%;
      max-width: (@wrap-max + @label-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      text-align: center;
    }

    .vsep {
      color: #e5e7eb;
      user-select: none;
      line-height: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      margin: 0 2px;
    }

    /* 等宽按钮样式 */
    .foot-btn {
      height: 36px;
      // min-width: 108px;
      padding: 0 20px;
      border-radius: 8px;
      font-weight: 600;
      transition: box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease,
        border-color 0.2s ease;

      &.primary {
        background: #1677ff !important;
        border: 1px solid #1677ff !important;
        color: #fff !important;
        &:hover {
          filter: brightness(1.02);
          box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
        }
      }
      &.ghost {
        background: #fafafa !important;
        border: 1px solid #e8e8e8 !important;
        color: #666 !important;
        &:hover {
          background: #fff !important;
          color: #595959 !important;
          border-color: #d9d9d9 !important;
        }
      }
    }
  }

  .bottom-gap {
    height: 8px;
  }

  /* 小屏优化 */
  @media (max-width: 576px) {
    .page-header {
      padding: 16px 12px;
    }
    .form-like {
      padding: 16px 12px 0 12px;
    }
    .page-footer {
      padding-left: 12px;
      padding-right: 12px;
    }
    .page-footer .footer-inner {
      max-width: none;
    }
  }
}


.top-divider,
.bottom-divider {
  display: none;
}
</style>
